import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { setAssemblySize, setLanguage } from "@/redux/modules/global/action";
import { Layout, Dropdown, Drawer, Avatar, message, Modal } from "antd";
import { FullscreenOutlined, FullscreenExitOutlined, ExclamationCircleFilled } from "@ant-design/icons";
import CollapseIcon from "./components/CollapseIcon";
import { useNavigate } from "react-router-dom";
import "./index.less";
import avatar from "@/assets/images/avatar.png";
import screenfull from "screenfull";
const LayoutHeader = (props: any) => {
	console.log(props);
	const navigate = useNavigate();
	const { assemblySize, setAssemblySize, language, setLanguage, useName } = props;
	const { Header } = Layout;
	const onClick = (e: any) => {
		setAssemblySize(e.key);
	};
	const items = [
		{
			key: "middle",
			label: <span>默认</span>,
			disabled: assemblySize == "middle",
			onClick
		},
		{
			key: "large",
			label: <span>大型</span>,
			disabled: assemblySize == "large",
			onClick
		},
		{
			key: "small",
			label: <span>小型</span>,
			disabled: assemblySize == "small",
			onClick
		}
	];
	const languageClick = (e: any) => {
		console.log(e.key);
		setLanguage(e.key);
	};
	const langitems = [
		{
			key: "zh-CN",
			label: <span>中文</span>,
			onClick: languageClick,
			disabled: language == "zh-CN"
		},
		{
			key: "en-US",
			label: <span>English</span>,
			onClick: languageClick,
			disabled: language == "en-US"
		}
	];

	const [open, setOpen] = useState(false);
	const showDrawer = () => {
		setOpen(true);
	};
	const onClose = () => {
		setOpen(false);
	};

	const [fullScreen, setFullScreen] = useState(screenfull.isFullscreen);
	const fullScreenChange = () => {
		// 实现全屏切换
		if (!screenfull.isEnabled) message.warning("当前您的浏览器不支持全屏 ❌");
		screenfull.toggle();
	};
	useEffect(() => {
		// 监听全屏切换
		screenfull.on("change", () => {
			if (screenfull.isFullscreen) setFullScreen(true);
			else setFullScreen(false);
			return () => {
				// 清理事件绑定
				screenfull.off("change", () => {});
			};
		});
	}, []);
	const fullScreenJsx = fullScreen ? (
		<FullscreenExitOutlined onClick={fullScreenChange} style={{ fontSize: "20px" }} />
	) : (
		<FullscreenOutlined onClick={fullScreenChange} style={{ fontSize: "20px" }} />
	);
	// 个人信息功能
	const { confirm } = Modal;
	const showConfirm = () => {
		confirm({
			title: "温馨提示🧡",
			icon: <ExclamationCircleFilled />,
			content: "是否退出登录",
			onOk() {
				message.success("退出登录成功！");
				//跳转至登录页面
				navigate("/");
			},
			onCancel() {
				console.log("Cancel");
			}
		});
	};
	const userClick = (e: any) => {
		console.log(e);
		if (e.key === "outLogin") {
			showConfirm();
		}
	};
	const useitemsList = [
		{
			key: "home",
			label: <span className="dropdown-item">首页</span>,
			onClick: userClick,
			disabled: false
		},
		{
			key: "useInfo",
			label: <span className="dropdown-item">个人信息</span>,
			onClick: userClick,
			disabled: false
		},
		{
			key: "changePwd",
			label: <span className="dropdown-item">修改密码</span>,
			onClick: userClick,
			disabled: false
		},
		{
			type: "divider"
		},
		{
			key: "outLogin",
			label: <span className="dropdown-item">退出登录</span>,
			onClick: userClick,
			disabled: false
		}
	];
	return (
		<Header className="ant-layout-header">
			<div className="header-lf">
				{/* 左侧菜单收展开按钮 */}
				<CollapseIcon />
			</div>
			<div className="header-ri">
				{/* 右侧头部内容 */}
				{/* 头部字体大小设置 */}
				<Dropdown menu={{ items }} placement="bottom" arrow={true}>
					<i className="icon-style iconfont icon-contentright"></i>
				</Dropdown>
				{/* 语言切换 */}
				<Dropdown menu={{ items: langitems }} placement="bottom" arrow={true}>
					<i className="icon-style iconfont icon-zhongyingwen"></i>
				</Dropdown>
				{/* 主题换肤 */}
				<i className="icon-style iconfont icon-zhuti" onClick={showDrawer}></i>
				<Drawer title="Basic Drawer" onClose={onClose} open={open}>
					<p>Some contents...</p>
					<p>Some contents...</p>
					<p>Some contents...</p>
				</Drawer>
				{/* 全屏 */}
				{fullScreenJsx}
				<i className="icon-style iconfont icon-quanping"></i>
				{/* 用户名称 */}
				<span className="header-user">{useName}</span>
				{/* 用户头像 */}
				<Dropdown menu={{ items: useitemsList }} placement="bottom" arrow={true}>
					<Avatar size="large" src={avatar} />
				</Dropdown>
			</div>
		</Header>
	);
};
const mapStateToProps = (state: any) => {
	return {
		...state.global,
		...state.useInfo
	};
};
const mapDispatchToProps = { setAssemblySize, setLanguage };
export default connect(mapStateToProps, mapDispatchToProps)(LayoutHeader);
